<template>
<div class="main main-version">
	<div class="main-hd">
		<h2>{{$t('m.píngtáiguǎnlǐ')}}</h2>
	</div>
	<div class="main-bd">
		<div class="content-wrap">
			<Tabs active-key="key1" style="min-height: 350px;">
				<Tab-pane label="引流平台数据" key="key1">
					<DatePicker type="daterange" format="yyyy-MM-dd" :options="disDate" @on-change="timeChange" placeholder="请选择时间" style="width: 200px;margin-right: 10px;"></DatePicker>
					<Select v-model="state" style="width: 200px;">
						<Option :value="-1">全部平台</Option>
						<Option :value="1">上线平台</Option>
						<Option :value="0">下线平台</Option>
					</Select>
					<Button type="primary" style="float: right;" @click="showDaoliuModal(0)">添加</Button>	
					<div class="list" style="margin-top: 10px;">
						<table class="table table-hover table-condensed" border>
							<thead>
								<tr>
									<td width="80">id</td>
									<td>平台名称</td>
									<td>所属客户</td>
									<td>上线日期</td>
									<td width="250">生成链接</td>
									<td>点击量</td>
									<td>UV</td>
									<td>注册量</td>
									<td>提交认证量</td>
									<td>认证成功量</td>
									<td>下单人数</td>
									<td>下单总金额</td>
									<td>最后登录时间</td>
									<td  width="190">操作</td>
								</tr>
							</thead>
							<tbody>
								<tr v-for="item in tableList">
									<td>{{item.platformId}}</td>
									<td>{{item.platformName}}</td>
									<td>{{ item.investorName }}</td>
									<td>{{item.onlineTime | getLocalTime}}</td>
									<td>{{item.link}}</td>
									<td>{{item.clickCount}}</td>
									<td>{{item.clickUv}}</td>
									<td>{{item.registerCount}}</td>
									<td>{{item.applyCount}}</td>
									<td>{{item.applySuccessCount}}</td>
									<td>{{item.orderCount}}</td>
									<td>{{item.orderMoney}}</td>
									<td>{{ item.lastLoginTime | getLocalTime }}</td>
									<td>
										<Button size="small" type="success" @click="handleRemark(item.platformId, item.remark)">备注</Button>
										<Button size="small" type="primary" @click="getPlatformDetail(item.platformId)">详情</Button>
										<Button size="small" type="warning" @click="showDaoliuModal(1,item.platformId)">编辑</Button>
										<Delete :id="item.platformId" :port="'daoliu/deletePlatform'" :get-that-fun="getFinanceDateInfo"></Delete>
									</td>
								</tr>
							</tbody>
						</table>
						<div style="float: right;margin-top:20px;text-align: right;">
							<!-- <span class="kkpager_totalSize">共有{{loan_list_size}}条数据</span> -->
							<Page
								:total="loan_list_size"
								:current.sync="page"
								:page-size-opts="[10, 20, 40, 80, 100]"
								show-total
								show-elevator
								show-sizer
								@on-change="pageChange"
								@on-page-size-change="handleSizeChange"
								style="margin: 15px 0;"></Page>
						</div>

						<Modal
							v-model="addOrEditModal"
							title="平台详情"
							:footer-hide="true"
							:mask-closable="false"
							@on-cancel="handleActionCancel"
							>
							<i-form
								:model="formItem"
								ref="actionForm"
								:label-width="90"
								:rules="actionRules">
								<Form-item label="平台名称" prop="platformName">
									<i-input v-model="formItem.platformName" placeholder="请输入平台名称"></i-input>
								</Form-item>
								<Form-item label="对接人姓名" prop="contactName">
									<i-input v-model="formItem.contactName" placeholder="请输入对接人姓名"></i-input>
								</Form-item>
								<Form-item label="联系方式" prop="contactPhone">
									<i-input v-model="formItem.contactPhone" placeholder="请输入联系方式"></i-input>
								</Form-item>
								<Form-item label="结算方式" prop="settleType">
									<i-input v-model="formItem.settleType" placeholder="请输入结算方式"></i-input>
								</Form-item>
								<Form-item label="合作模式" prop="coopMode">
									<i-input v-model="formItem.coopMode" placeholder="请输入合作模式"></i-input>
								</Form-item>
								<Form-item label="价格" prop="price">
									<i-input v-model="formItem.price" placeholder="请输入价格"></i-input>
								</Form-item>
								<Form-item label="后台账号">
									<i-input v-model="formItem.account" placeholder="请输入后台账号"></i-input>
								</Form-item>
								<Form-item label="后台密码">
									<i-input  type="password" v-model="formItem.password" placeholder="请输入后台密码"></i-input>
								</Form-item>
								<div v-show="platFormIsShow">
									<Form-item label="生成链接">
										<i-input v-model="formItem.link" placeholder="请输入生成链接"></i-input>
									</Form-item>
									<!-- <Form-item label="添加时间">
										<i-input v-model="formItem.addtime" placeholder="请输入添加时间"></i-input>
										<DatePicker
											style="width: 100%;"
											type="datetime"
											:value="formItem.addtime"
											placeholder="请选择还款时间"
											format="yyyy-MM-dd HH:mm:ss"
											@on-change="handlePicker"></DatePicker>
									</Form-item> -->
									<Form-item label="平台ID">
										<i-input v-model="formItem.id" placeholder="请输入平台ID"></i-input>
									</Form-item>
								</div>
								<Form-item label="注册折扣率" prop="registerDiscountRateNew">
									<i-input v-model="formItem.registerDiscountRateNew" placeholder="请输入注册折扣率"></i-input>
									<div style="font-size: 12px; color: #ff9900;">
										<Icon type="ios-alert" size="14" color="#ff9900" style="margin-top: -2px;margin-right: 4px;" />输入的注册折扣率不能大于1，最长小数点后两位
									</div>
								</Form-item>
								<Form-item label="状态" prop="state">
									<RadioGroup  v-model="formItem.state">
										<Radio :label="1">上线</Radio>
										<Radio :label="0">下线</Radio>
									</RadioGroup >
								</Form-item>
								<Form-item>
									<Button type="primary" @click="updateDaoliuPlatform(showModalState)">提交</Button>
								</Form-item>
							</i-form>
						</Modal>
						
						<Modal
							v-model="identityInfo.identityInfoModal"
							title="第三方引流平台详情"
							width="1000">
							<div class="threePlat">
								<p><span>名称:</span>{{identityInfo.infoList.platformName}}</p>
								<p><span>id:</span>{{identityInfo.infoList.platformId}}</p>
								<p><span>平台链接:</span>{{identityInfo.infoList.link}}</p>
								<p><span>对接人姓名:</span>{{identityInfo.infoList.contactName}}</p>
								<p><span>联系方式:</span>{{identityInfo.infoList.contactPhone}}</p>
								<p><span>合作模式:</span>{{identityInfo.infoList.coopMode}}</p>
								<p><span>价格:</span>{{identityInfo.infoList.price}}</p>
								<Row :gutter="10">
									<Col span="5" class="card bg1">
										<h5>点击量</h5>
										<h2>{{identityInfo.infoList.clickCount}}</h2>
										<h5>本月累计:{{identityInfo.monthList.clickCount}}</h5>
									</Col>
									<Col span="5" class="card bg2">
										<h5>注册量</h5>
										<h2>{{identityInfo.infoList.registerCount}}</h2>
										<h5>本月累计:{{identityInfo.monthList.registerCount}}</h5>
									</Col>
									<Col span="5" class="card bg3">
										<h5>提交认证量</h5>
										<h2>{{identityInfo.infoList.applyCount}}</h2>
										<h5>本月累计:{{identityInfo.monthList.applyCount}}</h5>
									</Col>
									<Col span="5" class="card bg4">
										<h5>认证成功量</h5>
										<h2>{{identityInfo.infoList.applySuccessCount}}</h2>
										<h5>本月累计:{{identityInfo.monthList.applySuccessCount}}</h5>
									</Col>
									<Col span="4" class="card bg5">
										<h5>下单成功人数</h5>
										<h2>{{identityInfo.infoList.orderCount}}</h2>
										<h5>本月累计:{{identityInfo.monthList.orderCount}}</h5>
									</Col>
								</Row>
									
								<Row :gutter="10">
									<Col span="5" class="card bg6">
										<h5>注册-认证转化率</h5>
										<h2>{{identityInfo.infoList.applyRate}}%</h2>
										<h5>本月累计:{{identityInfo.monthList.applyRate}}%</h5>
									</Col>
									<Col span="5" class="card bg6">
										<h5>认证-通过转化率</h5>
										<h2>{{identityInfo.infoList.applySuccessRate}}%</h2>
										<h5>本月累计:{{identityInfo.monthList.applySuccessRate}}%</h5>
									</Col>
									<Col span="5" class="card bg6">
										<h5>通过-下单转化率</h5>
										<h2>{{identityInfo.infoList.orderRate}}%</h2>
										<h5>本月累计:{{identityInfo.monthList.orderRate}}%</h5>
									</Col>
									<Col span="9" class="card bg7">
										<h5>下单总金额</h5>
										<h2>{{identityInfo.infoList.orderMoney}}</h2>
										<h5>本月累计:{{identityInfo.monthList.orderMoney}}</h5>
									</Col>
								</Row>
							</div>
						</Modal>
						<!-- 商户列表 end -->
					</div>
				</Tab-pane>
				<Tab-pane label="开放权限" key="key2">
					<div class="list">
						<Table border :columns="columns1" :data="data1" style="text-align: center;"></Table>
					</div>
				</Tab-pane>
			</Tabs>
		</div>
	</div>

	<Modal
		v-model="remarkModal"
		title="备注详情"
		footer-hide
		@on-cancel="handleRemarkCancel"
	>
		<div class="remark-body">
			<template v-if="remark">
				<h3 class="remark-head">备注内容</h3>
				<p class="remark-txt">{{ remark }}</p>
			</template>
			<Form
				ref="remarkForm"
				:model="remarkForm"
				:rules="remarkRules"
			>
				<FormItem label="请在下面输入你需要备注的内容：" prop="remark">
					<Input type="textarea" :autosize="{minRows: 5}" v-model="remarkForm.remark" />
				</FormItem>
				<FormItem>
					<Button type="primary" @click="handleAddRemark">添加备注</Button>
				</FormItem>
			</Form>
		</div>
	</Modal>
</div>
</template>

<script>
import Delete from './delete';	
import { dateFormat } from '../static/tools';
export default {
	name: 'platformManage',
	components: {
		Delete
	},
	data() {
		return{
			columns1:[
				{
					title:'平台id',
					key:'platformId'
				},
				{
					title:'平台名称',
					key:'platformName'
				},
				{
					title:'点击量',
					key:'clickCountLimit',
					render: (h, col) => {
						var bool = col.row.clickCountLimit == 1 ? true : false;
                        return h('checkbox',{
                            props:{
                                value:bool
                            },
                            on:{
                                'on-change':(event) => {
                                	// console.log(event);
                                	col.row.clickCountLimit = event == true ? 1 : 0;
                                	this.updatePlatformLimit(col.row);
                                }
                            }
                        });
                    }
				},
				{
					title:'注册量',
					key:'registerCountLimit',
					render: (h, col) => {
						var bool = col.row.registerCountLimit == 1 ? true : false;
                        return h('checkbox',{
                            props:{
                                value:bool
                            },
                            on:{
                                'on-change':(event) => {
                                	// console.log(event);
                                	col.row.registerCountLimit = event == true ? 1 : 0;
                                	this.updatePlatformLimit(col.row);
                                }
                            }
                        });
                    }
				},
				{
					title:'提交认证量',
					key:'applyCountLimit',
					render: (h, col) => {
						var bool = col.row.applyCountLimit == 1 ? true : false;
                        return h('checkbox',{
                            props:{
                                value:bool
                            },
                            on:{
                                'on-change':(event) => {
                                	// console.log(event);
                                	col.row.applyCountLimit = event == true ? 1 : 0;
                                	this.updatePlatformLimit(col.row);
                                }
                            }
                        });
                    }
				},
				{
					title:'认证成功量',
					key:'applySuccessCountLimit',
					render: (h, col) => {
						var bool = col.row.applySuccessCountLimit == 1 ? true : false;
                        return h('checkbox',{
                            props:{
                                value:bool
                            },
                            on:{
                                'on-change':(event) => {
                                	// console.log(event);
                                	col.row.applySuccessCountLimit = event == true ? 1 : 0;
                                	this.updatePlatformLimit(col.row);
                                }
                            }
                        });
                    }
				},
				{
					title:'总下单人数',
					key:'orderCountLimit',
					render: (h, col) => {
						var bool = col.row.orderCountLimit == 1 ? true : false;
                        return h('checkbox',{
                            props:{
                                value:bool
                            },
                            on:{
                                'on-change':(event) => {
                                	// console.log(event);
                                	col.row.orderCountLimit = event == true ? 1 : 0;
                                	this.updatePlatformLimit(col.row);
                                }
                            }
                        });
                    }
				},
				{
					title:'总下单金额',
					key:'orderMoneyLimit',
					render: (h, col) => {
						var bool = col.row.orderMoneyLimit == 1 ? true : false;
                        return h('checkbox',{
                            props:{
                                value:bool
                            },
                            on:{
                                'on-change':(event) => {
                                	// console.log(event);
                                	col.row.orderMoneyLimit = event == true ? 1 : 0;
                                	this.updatePlatformLimit(col.row);
                                }
                            }
                        });
                    }
				},
				{
					title:'注册-认证转化率',
					key:'applyRateLimit',	
					render: (h, col) => {
						var bool = col.row.applyRateLimit == 1 ? true : false;
                        return h('checkbox',{
                            props:{
                                value:bool
                            },
                            on:{
                                'on-change':(event) => {
                                	// console.log(event);
                                	col.row.applyRateLimit = event == true ? 1 : 0;
                                	this.updatePlatformLimit(col.row);
                                }
                            }
                        });
                    }
				},
				{
					title:'认证-通过转化率',
					key:'applySuccessRateLimit',
					render: (h, col) => {
						var bool = col.row.applySuccessRateLimit == 1 ? true : false;
                        return h('checkbox',{
                            props:{
                                value:bool
                            },
                            on:{
                                'on-change':(event) => {
                                	// console.log(event);
                                	col.row.applySuccessRateLimit = event == true ? 1 : 0;
                                	this.updatePlatformLimit(col.row);
                                }
                            }
                        });
                    }
				},
				{
					title:'通过-下单转化率',
					key:'orderRateLimit',	
					render: (h, col) => {
						var bool = col.row.orderRateLimit == 1 ? true : false;
                        return h('checkbox',{
                            props:{
                                value:bool
                            },
                            on:{
                                'on-change':(event) => {
                                	// console.log(event);
                                	col.row.orderRateLimit = event == true ? 1 : 0;
                                	this.updatePlatformLimit(col.row);
                                }
                            }
                        });
                    }
				}
			],
			data1:[],
			formItem:{
				platformName: '',
				contactName: '',
				contactPhone: '',
				settleType: '',
				coopMode: '',
				price: '',
				state: 1,
				account: '',
				password: '',
				link: '',
				id: '',
				registerDiscountRateNew: ''
			},
			identityInfo:{
				identityInfoModal:false,
				infoList:[],
				monthList:{}
			},
			tableList:[],
			beginDate:'',
			endDate:'',
			state:-1,
			upDown:0,
			addOrEditModal:false,
			showModalState:'',
			platFormIsShow:false,
			editList:[],
			type:1,
			loan_list_size: 1,
			loan_list_page: 1,
			loading: true,
			disDate: {
				disabledDate (date) {
					return date && date.valueOf() > Date.now();
				}
			},
			page: 1,
			pageSize: 10,
			remarkModal: false,
			remarkForm: {
				remark: ''
			},
			remarkRules: {
				remark: [
					{ required: true, message: '输入的备注内容不能为空', trigger: 'blur' }
				]
			},
			platformId: '',
			remark: '',
			actionRules: {
				platformName: [
					{ required: true, message: '请输入平台名称', trigger: 'blur' }
				],
				contactName: [
					{ required: true, message: '请输入对接人姓名', trigger: 'blur' }
				],
				contactPhone: [
					{ required: true, message: '请输入联系方式', trigger: 'blur' }
				],
				settleType: [
					{ required: true, message: '请输入结算方式', trigger: 'blur' }
				],
				price: [
					{ required: true, message: '请输入价格', trigger: 'blur' }
				],
				coopMode: [
					{ required: true, message: '请输入合作模式', trigger: 'blur' }
				],
				state: [
					{ required: true, type: 'number', message: '请选择状态', trigger: 'change' }
				]
			}
		}
	},
	methods:{
		getFinanceDateInfo(){
			var _this = this;
			var param = {};
			param.state = _this.state;
			param.beginDate = _this.beginDate;
			param.endDate = _this.endDate;
			param.page = _this.page;
			param.pageSize = _this.pageSize;

			this.$http.post('/helsinki/admin/daoliu/getPlatformList', param)
			.then(function(res) {
				if (res.data.errcode == 0) {
					_this.tableList = res.data.data.list;
					_this.loan_list_size = res.data.data.size;
					_this.loan_list_page = param.page;
					_this.loading = false;
				}
	    	}, function(err) {
				console.log(err);
			});
		},
		updateDaoliuPlatform(showModalState){
			let _this = this, param = {};
			const { actionForm } = this.$refs;
			const { registerDiscountRateNew } = _this.formItem;

			let regRate = (registerDiscountRateNew == '' || isNaN(registerDiscountRateNew)) ? -2 : registerDiscountRateNew;
			
			param = {
				id: _this.formItem.id || 0,
				platformName: _this.formItem.platformName,
				contactName: _this.formItem.contactName,
				contactPhone: _this.formItem.contactPhone,
				settleType: _this.formItem.settleType,
				coopMode: _this.formItem.coopMode,
				price: _this.formItem.price,
				state: _this.formItem.state,
				account: _this.formItem.account,
				password: _this.formItem.password,
				registerDiscountRateNew: regRate
			}
			
			actionForm.validate(valid => {
				if (valid) {
					this.$http.post('/helsinki/admin/daoliu/updateDaoliuPlatform', param)
					.then(function(res){
						if (res.data.errcode == 0) {
							_this.$Message.info(res.data.info);
							_this.addOrEditModal = false;
							_this.getFinanceDateInfo();
							actionForm.resetFields();
						}
					}, function(err){
						console.log(err);
					});
				}
			});
			
		},
		showDaoliuModal(showModalState, platformId) {
			var _this = this;
			this.addOrEditModal = true;
			this.showModalState = showModalState;
			this.showModalState == 0 ? this.platFormIsShow = false : this.platFormIsShow = true;
			
			if(showModalState == 1) {
				this.$http.post('/helsinki/admin/daoliu/getOnlyPlatformInfo', { 
					platformId: platformId
				}).then(function(res) {
		    	if (res.data.errcode == 0) {
					let info = res.data.data.info;
					_this.formItem = info;
					// _this.formItem.addtime = dateFormat(info.addtime, 'year');
					if (_this.formItem.registerDiscountRateNew == -2) {
						_this.formItem.registerDiscountRateNew = `默认（${_this.formItem.defaultRegisterDiscountRate}）`;
					}
		    	}
		    	}, function(err){
					console.log(err);
				});
			} else {
				this.formItem = {
					platformName: '',
					contactName: '',
					contactPhone: '',
					settleType: '',
					coopMode: '',
					price: '',
					state: 1,
					account: '',
					password: '',
					link: '',
					id: '',
					registerDiscountRateNew: ''
				};
			}
		},
		getPlatformDetail(platformId){
			var _this = this,param = {};
			_this.identityInfo.identityInfoModal = true;
			param = {
				platformId:platformId,
				startDate:_this.beginDate,
				endDate:_this.endDate
			}
			this.$http.post('/helsinki/admin/daoliu/getPlatformDetail',param).then(function(res){
	    	if (res.data.errcode == 0) {
	        	_this.identityInfo.infoList = res.data.data.detail;
	        	_this.identityInfo.monthList = res.data.data.monthData;
	    	}
	    	},function(err){
				console.log(err);
			});
		},
		timeChange(e){
			if(typeof(e)=="undefined"){
				this.beginDate = e[0];
			}else if(typeof(e)=="object"){
				this.beginDate = e[0];
				this.endDate = e[1];
			}
			this.page = 1;
			this.getFinanceDateInfo();
		},
		pageChange(e){
			this.page = e;
			this.getFinanceDateInfo();
		},
		// 每页条数
		handleSizeChange (val) {
			this.pageSize = val;
			this.getFinanceDateInfo();
		},
		getPlatformLimit(){//获取引流平台权限
			var _this = this,param = {};
			this.$http.post('/helsinki/admin/daoliu/getPlatformLimit',{}).then(function(res){
	    	if (res.data.errcode == 0) {
	        	_this.data1 = res.data.data.list;
	    	}
	    	},function(err){
				console.log(err);
			});
		},
		updatePlatformLimit(row){
			var _this = this,param = row;
			this.$http.post('/helsinki/admin/daoliu/updatePlatformLimit',param).then(function(res){
	    	if (res.data.errcode == 0) {
	        	console.log(res.data.info);
	    	}
	    	},function(err){
				console.log(err);
			});
		},
		handleRemark (id, remark) {
			this.platformId = id;
			this.remark = remark;
			this.remarkModal = true;
		},
		// 添加备注按钮
		handleAddRemark () {
			const { remarkForm } = this.$refs;
			remarkForm.validate(valid => {
				if (valid) {
					this.$http.post('/helsinki/admin/daoliu/updateDaoliuPlatformRemark', {
						id: this.platformId,
						remark: this.remarkForm.remark
					}).then(({ data: { errcode, info, data } }) => {
						if (errcode == 0) {
							this.$Message.success('添加备注成功');
							this.handleResetRemark();
							this.getFinanceDateInfo();
						}
					}, error => {
						console.log(error);
					});
				}
			});
		},
		// 添加备注 取消按钮
		handleRemarkCancel () {
			this.handleResetRemark();
		},
		// remark 重置
		handleResetRemark () {
			this.platformId = '';
			this.$refs.remarkForm.resetFields();
			this.remarkModal = false;
		},
		handleActionCancel() {
			this.$refs.actionForm.resetFields();
		}
	},
	mounted:function(){
		this.getPlatformLimit();
		this.getFinanceDateInfo();
	},
	watch:{
		state:function(){
			this.page = 1;
			this.getFinanceDateInfo();
		}
	}
}
</script>
<style>
	@import '../static/style.css';
	@import '../static/common.scss';
	
	.threePlat{
		font-size: 16px;
	}
	/*$bg:#aeaeae #00cc99 #6666ff #ff6600  #ff3366;*/
	.card{
		text-align: center;
		width: 18%;
		margin:10px 5px 0;
		padding: 30px 0;
		height: 180px;
		background: #F16543;
		color: #fff;
	}
	.card h2{
		font-size: 30px;
		margin-top: 30px;
	}
	.bg1{background: #aeaeae;}
	.bg2{background: #00cc99;}
	.bg3{background: #6666ff;}
	.bg4{background: #ff6600;}
	.bg5{background: #ff3366;}
	.bg6{background: #333333;}
	.bg7{background: #ff9900;width: 37%;}
	.remark-txt {
		margin-top: 5px;
		margin-bottom: 15px;
	}
</style>